<template>
  <div class="mb70 container message-center-details">
    <p class="bread">
      <a href="#/index/message-center" class="font-s-18">交易监控服务管理-信息中心</a> >
      <a href="javascript:void(0);" class="font-s-16">查看详情</a>
    </p>
    <div class="bg-c-fff box-border content">
      <h3>交易监控申请单详情</h3>
      <table class="box box-border">
        <tr>
          <th colspan="2">交易监控申请单</th>
        </tr>
        <tr>
          <td width="30%">监控类型</td>
          <td width="70%">
            <input type="text" readonly="readonly" class="box-border" name="" v-model="monitorType">
          </td>
        </tr>
        <tr>
          <td>申请监控方名称</td>
          <td>
            <input type="text" readonly="readonly" class="box-border" name="" v-model="businessName">
          </td>
        </tr>
        <tr>
          <td>交易相对方名称</td>
          <td>
            <textarea type="text" readonly="readonly" name="" v-model="relativeName"></textarea>
          </td>
        </tr>
        <tr>
          <td>合同类型</td>
          <td>
            <input type="text" readonly="readonly" class="box-border" name="" v-model="contractType">
          </td>
        </tr>
        <tr>
          <td>合同金额</td>
          <td>
            <input type="text" readonly="readonly" class="box-border" name="" v-model="contractPrice">万元
          </td>
        </tr>
        <tr>
          <td>本次监控联系人</td>
          <td>
            <input type="text" class="box-border mb5" readonly="readonly" name="" v-model="contactsName">
            <input type="text" class="box-border" readonly="readonly" name="" v-model="contactsPhone">
          </td>
        </tr>
      </table>
    </div>
    <div class="bg-c-fff box-border content">
      <h3>资质审查报告上传记录</h3>
      <table class="box box-border">
        <tr>
          <th>上传时间</th>
          <th>上传文件</th>
          <th>接收方</th>
        </tr>
        <tr v-for="item in fileList">
          <td>{{item.createTime}}</td>
          <td>
            <div v-if="isImage(item.address)">
              <!-- <a :href="item.address"><img :src="item.address" alt="" class="db auto" @click="see">{{item.address | fileName}}</a> -->
               <a :href="item.address" download><span class="iconfont icon-file-copy icon"></span>{{item.address | fileName}}</a>
            </div>
            <div v-else class="showImg">
              <a :href="item.address" target="_blank"><img :src="item.address" alt="">{{item.address | fileName}}</a>
            </div>
          </td>
          <td>{{item.names}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script type="text/javascript">
import FileNum from '../components/FileNum'
export default {
  components: {
    FileNum
  },
  data() {
    return {
      monitorType: '',
      businessName: '',
      relativeName: '',
      contractType: '',
      contractPrice: '',
      contactsName: '',
      contactsPhone: '',
      fileList: []
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.$http.post('/transactionMonitorSer/sys/read/detail', {
        id: this.$route.query.id
      }).then(data => {
        if (data.data.httpCode === 200) {
          this.monitorType = this.getMonitor(data.data.data.monitorType)
          this.businessName = data.data.data.businessName
          this.contractType = data.data.data.contractType
          this.contractPrice = data.data.data.contractPrice / 1000000
          this.contactsName = data.data.data.contactsName
          this.contactsPhone = data.data.data.contactsPhone
          this.relativeName = data.data.data.otherBusiness
          this.fileList = data.data.data.fileList
        } else {
          this.$toasted.show(data.data.msg)
        }
      }).catch(err => {
        console.log(err)
        this.$toasted.show('网络错误')
      })
    },
    getMonitor(v) {
      if (v === 1) {
        return '单方监控'
      }
      if (v === 2) {
        return '双方监控'
      }
      if (v === 3) {
        return '多方监控'
      }
    },
    see() {
      this.seeShow = true
    },
    isImage(name) {
      let imageArr = ['jpg', 'gif', 'png']
      let tempArr = name.split('.')
      let suffix = tempArr[tempArr.length - 1]
      if (imageArr.indexOf(suffix) === -1) {
        return true
      } else {
        return false
      }
    }
  },
  filters: {
    fileName(v) {
      return v.split('/')[v.split('/').length - 1]
    }
  }
}

</script>
<style type="text/css" scoped>
.container {
  margin-top: 20px;
}

.box-border {
  border: 1px solid #ddd;
}

.message-center-details .content h3 {
  line-height: 40px;
  border-bottom: 1px solid #ddd;
  padding-left: 30px;
}

.message-center-details .content {
  margin-bottom: 20px;
}

.message-center-details .content .box {
  width: 900px;
}

table {
  border-collapse: collapse;
  margin: 40px auto;
}

table tr th,
table tr td {
  text-align: center;
  background-color: #fff;
  color: #333;
  border: 1px solid #ddd;
}

table tr th {
  background-color: #f5f3f3;
}

table tr td:nth-of-type(1) {
  vertical-align: middle;
  text-align: center;
}

table tr td {
  text-align: left;
  padding: 10px 30px;
  height: 40px;
}

table tr td input {
  line-height: 35px;
  height: 35px;
  padding: 0 10px;
  width: 320px;
}

textarea {
  width: 320px;
  line-height: 26px;
  padding: 8px 10px;
}

table img {
  height: 120px;
}

.mb5 {
  margin-bottom: 5px;
}

.icon {
  font-size: 50px;
  color: #d8e7ff;
  margin-left: 54px;
  vertical-align: middle;
}

.showImg img {
  margin-left: 54px;
  width: 100px;
  height: 100px;
  vertical-align: middle;
}

</style>
